<template>
  <div class="page-info">
    <div class="search">
      <div class="search-box">
        <a-form :model="searchInfo" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item :name="labelMap['userId'].name" :label="labelMap['userId'].label">
                <a-input style="width: 90%;margin-left: 8px;" v-model:value="searchInfo.userId" :placeholder="'请选择' + labelMap['userId'].label" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item :name="labelMap['retrievalCount'].name" :label="labelMap['retrievalCount'].label">
                <a-input style="width: 90%;margin-left: 8px;" v-model:value="searchInfo.retrievalCount" :placeholder="'请选择' + labelMap['retrievalCount'].label" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item :name="labelMap['retrievalTime'].name" :label="labelMap['retrievalTime'].label">
                <a-input style="width: 90%;margin-left: 8px;" v-model:value="searchInfo.retrievalTime" :placeholder="'请选择' + labelMap['retrievalTime'].label" allow-clear />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item :name="labelMap['notes'].name" :label="labelMap['notes'].label">
                <a-input style="width: 90%;margin-left: 8px;" v-model:value="searchInfo.notes" :placeholder="'请选择' + labelMap['notes'].label" allow-clear />
              </a-form-item>
            </a-col>
          </a-row>
            <a-row :gutter="24">
                <a-col style="text-align: right; margin-bottom: 20px;">
                  <a-space>
                    <a-button type="primary" @click="query"> 查找</a-button>
                    <a-button type="primary" @click="cancelQuery">清空</a-button>
                  </a-space>
                </a-col>
            </a-row>
        </a-form>
      </div>
    </div>
    <div class="button" style="margin: 10px;">
      <a-space>
        <a-button type="primary" @click="editUserCallRetrieval('add')">新增</a-button>
        <a-button type="primary" danger @click="batchDelUserCallRetrieval">删除</a-button>
      </a-space>
    </div>
    <div class="content">
      <a-table :dataSource="dataSource" :columns="columns" :loading="loading" :row-key="(record) => record.id"
        :pagination="pagination" @change="handleTableChange" :scroll="{ y: 470 }" :row-selection="rowSelection">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <a-space>
              <a-button type="primary" size="small" @click="editUserCallRetrieval('update', record.id)">编辑</a-button>
              <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" @confirm="delUserCallRetrieval(record.id)"
                @cancel="cancel">
                <a-button type="primary" size="small" danger>删除</a-button>
              </a-popconfirm>
            </a-space>
            <span></span>
          </template>
        </template>
      </a-table>
      <UserCallRetrievalDetail ref="editInfo" :open="visible" :modelInfo="modelInfo" @handleOk="handleOk"
        @handleCancel="handleCancel"></UserCallRetrievalDetail>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  SearchInfo,
  pagination,
  columns,
  DataItem,
  ModelInfo,
  pageInfo,
} from "./userCallRetrievalListTs";
import { getUserCallRetrievalPage, deleteUserCallRetrieval } from "@/api/userInfo/userCallRetrieval/userCallRetrievalTs";
import { message } from "ant-design-vue";

const labelCol = ref({ span: 5 });
const wrapperCol = ref({ span: 19 });

let rowIds = [] as any;

const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
    rowIds = selectedRowKeys;
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
    console.log(selected, selectedRows, changeRows);
  },
});

const labelMap = ref<any>(
{
    userId: {name: 'userId', label: '用户ID，关联用户表'},
    retrievalCount: {name: 'retrievalCount', label: '获取电话次数'},
    retrievalTime: {name: 'retrievalTime', label: '获取时间'},
    notes: {name: 'notes', label: '备注，例如获取电话的来源或说明'},
});

let searchInfo = ref<SearchInfo>({});


const cancelQuery = (): void => {
  searchInfo.value = {};
}

const query = (): void => {
  getUserCallRetrievalListPage(searchInfo.value, pagination.value);
}

const handleTableChange = (pagination): void => {
  getUserCallRetrievalListPage(searchInfo.value, pagination);
}

const delUserCallRetrieval = (ids: string): void => {
  deleteUserCallRetrieval(ids).then((res) => {
    if (res.code == "200") {
      message.success((res && "删除" + res.message) || "删除成功！", 3);
      getUserCallRetrievalListPage(searchInfo.value, pagination.value);
    } else {
      message.error((res && res.message) || "删除失败！", 3);
    }
  });
}

const batchDelUserCallRetrieval = (): void => {
  let ids = "";
  if (rowIds && rowIds.length > 0) {
    rowIds.forEach((item: string) => {
      ids += item + ",";
    });
    ids = ids.substring(0, ids.length - 1);
  } else {
    message.warning("请先选择数据！", 3);
    return;
  }
  delUserCallRetrieval(ids);
}

let loading = ref<boolean>(false);

let dataSource = ref();

const cancel = (e: MouseEvent): void => {
  console.log(e);
}

const getUserCallRetrievalListPage = (param: SearchInfo, cur: pageInfo): void => {
  loading.value = true;
  getUserCallRetrievalPage(param, cur.current, cur.pageSize)
    .then((res) => {
      if (res.code == "200") {
        dataSource.value = res.data.records;
        pagination.value.current = res.data.current;
        pagination.value.pageSize = res.data.size;
        pagination.value.total = res.data.total;
      } else {
        message.error((res && res.message) || "查询列表失败！");
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

const init = (): void => {
  //获取用户获取电话次数记录表页面数据
  getUserCallRetrievalListPage(searchInfo.value, pagination.value);
}

init();

let visible = ref<boolean>(false);

let modelInfo = ref<ModelInfo>({});

//新增和修改弹窗
const editUserCallRetrieval = (type: string, id?: number): void => {
  if (type == "add") {
    modelInfo.value.title = "新增明细";
    modelInfo.value.id = undefined;
  } else if (type == "update") {
    modelInfo.value.title = "修改明细";
    modelInfo.value.id = id;
  }
  modelInfo.value.confirmLoading = true;
  visible.value = true;
}

const handleOk = (v: boolean): void => {
  visible.value = v;
  getUserCallRetrievalListPage(searchInfo.value, pagination.value);
};

const handleCancel = (v: boolean): void => {
  visible.value = v;
};
</script>
<style lang="scss" scoped>
</style>
